<template>
    <div id="app">

        <div id="title"><el-text style="color: #79bbff;">
                <el-icon style="vertical-align: middle">
                    <svg t="1735884888506" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4434" width="200" height="200">
                        <path
                            d="M841 822c-0.7 0.6-69 55.2-207.2-3.8-163.5-69.7-288.8-1.7-294 1.2-12.2 6.8-16.6 22.2-9.8 34.4 6.8 12.2 22.2 16.6 34.4 9.8 1.1-0.6 108.6-58.9 249.5 1.2 54.7 23.3 101 31.2 138.8 31.2 77 0 118.1-32.9 120.6-35 10.8-8.9 12.3-24.9 3.3-35.6-8.9-10.8-24.8-12.3-35.6-3.4zM529.3 488.7c-9.9-9.9-25.9-9.9-35.8 0L370.9 611.3c7.5-51.4 63.7-153.6 171.2-261.1 64-64 132-115.9 191.5-146.1 54.9-27.9 89.6-30.1 99.8-20 24.9 24.9-28.7 153.8-166.1 291.3-51.9 51.9-106.4 95.8-157.7 127.1-11.9 7.3-15.7 22.9-8.4 34.8 7.3 11.9 22.9 15.7 34.8 8.4 54.7-33.4 112.4-79.9 167.1-134.6 67.7-67.7 122.9-140.3 155.5-204.4 47.1-92.7 31.8-137.3 10.7-158.5-21.1-21.1-65.8-36.4-158.5 10.7-64.1 32.6-136.7 87.8-204.4 155.5-119 119-211.6 266.9-180.3 341.8L142 840.2c-9.9 9.9-9.9 25.9 0 35.8 4.9 4.9 11.4 7.4 17.9 7.4s13-2.5 17.9-7.4l351.5-351.5c9.9-9.9 9.9-25.9 0-35.8z"
                            fill="#79bbff" p-id="4435"></path>
                    </svg>
                </el-icon>
                仓颉排课系统
            </el-text></div>


        <div class="login-wrapper">

            <div class="header">登录</div>
            <div class="form-wrapper">
                <input type="text" name="username" placeholder="账号" class="input-item" v-model="userName">
                <input type="password" name="password" placeholder="密码" class="input-item" v-model="password">
                <div class="btn" @click="Login">进入！</div>
            </div>
            <div class="msg">
                没有账号?
                <router-link to="/Signup">注册</router-link>

            </div>
        </div>

        <div id="title_1">
            <el-text tag="mark">
                <el-icon style="vertical-align: middle">
                    <svg t="1704813028811" class="icon" viewBox="0 0 1126 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6452" width="200" height="200">
                        <path
                            d="M1119.223717 473.967851l-21.390528-24.533103a23.727014 23.727014 0 0 1-5.841215-15.584361V264.583665c27.967736-17.36009 72.045543-31.624337-28.306527-74.954468C948.695293 142.654148 746.647673 64.229998 644.870346 22.675596c-0.490662-0.198601-8.913694-3.901931-9.345943-4.088851-76.204488-31.799573-109.698014-18.201225-171.357877 6.495431-104.557745 39.206234-278.041824 110.983081-397.377842 155.902023-91.578565 33.960823-86.017729 59.346742-1.448622 99.382428 126.602489 60.000958 369.491883 152.175328 423.196012 172.152283s92.454748 20.105461 146.591126-4.030438c51.636339-23.014386 137.32696-52.173731 354.398184-141.07702a23.727014 23.727014 0 0 1 32.710803 21.951285v102.992299a23.727014 23.727014 0 0 1-6.063181 15.841375l-23.750379 26.58921a23.727014 23.727014 0 0 0 1.343479 33.061275l43.049753 40.72495a23.727014 23.727014 0 0 0 31.857985 0.712628l48.201705-41.788051a23.727014 23.727014 0 0 0 2.348168-33.528572z"
                            p-id="6453"></path>
                        <path
                            d="M941.019936 494.891082c-93.961781 36.367403-235.400956 91.321552-293.485996 111.999452-79.604075 28.329892-101.508631 18.072719-166.22929-1.460303-89.475728-27.009777-220.318939-82.302716-296.406603-108.728373a23.212988 23.212988 0 0 0-30.806567 21.939603v369.281599a23.212988 23.212988 0 0 0 11.098308 19.860131c42.757692 26.180325 204.594389 116.216809 408.09063 116.216809 188.916569 0 346.535909-89.954708 388.417419-116.193445a23.212988 23.212988 0 0 0 10.911389-19.684893v-371.501261a23.212988 23.212988 0 0 0-31.58929-21.729319z"
                            p-id="6454"></path>
                    </svg>

                </el-icon>
                南京理工大学紫金学院</el-text>
        </div>

    </div>
</template>


<style src="../../style/quanju.css" scoped></style>


<style scoped>
* {
    margin: 0;
    padding: 0;
}


#app {
    height: 98vh;
    /* background-image: linear-gradient(to right, #fbc2eb, #a6c1ee); */
    /* background-image: linear-gradient(to right, #95d475, #eebe77); */

    background-image: url(../../image/backgroud.png);

    background-size: cover;
    background-position: center;
    border-radius: 20px;
    min-width: 1300px;
    min-height: 800px;

    position: relative;
}

.login-wrapper {

    opacity: 0.9;
    background-color: #fff;
    width: 358px;
    height: 588px;
    border-radius: 15px;
    padding: 0 50px;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -70%);
}

.header {
    font-size: 38px;
    font-weight: bold;
    text-align: center;
    line-height: 200px;
    color: #79bbff;
}

.input-item {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    border: 0;
    padding: 10px;
    border-bottom: 1px solid rgb(128, 125, 125);
    font-size: 15px;
    outline: none;
}

.input-item:placeholder {
    text-transform: uppercase;
}

.btn {
    text-align: center;
    padding: 10px;
    width: 100%;
    margin-top: 40px;
    /* background-image: linear-gradient(to right, #a6c1ee, #fbc2eb); */
    /* background-image: linear-gradient(to right, #95d475, #eebe77); */

    background-color: #79bbffaa;
    color: #fff;
    border-radius: 20px;
}

.msg {
    text-align: center;
    line-height: 88px;
    color: #79bbff;
}

a {
    text-decoration-line: none;
    color: #abc1ee;
}


#title {
    color: #529b2e;
    margin: 0 auto;
    text-align: center;
    font-size: 400%;
    padding-top: 50px;
}

#title_1 {
    color: #fab6b6;
    margin: 0 auto;
    text-align: center;
    /* transform: translate(-50%, -90%); */
    /* margin-top: 250px; */

    position: fixed;
    /* 使用固定定位 */
    bottom: 50px;
    /* 距离底部150像素 */
    left: 0;
    right: 0;
    /* 水平方向上靠左对齐 */

    position: absolute;

    left: 50%;
    transform: translateX(-50%);
    bottom: 50px;

}
</style>



<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
// import { ElMessage } from 'element-plus';
import { ElMessage } from 'element-plus';

// import axiosInstance from '../../js/axiosself'

import axiosSelfPro from '../../js/axiosSelfPro'

export default {
    name: 'LoginView',
    setup() {
        const userName = ref('');
        const password = ref('');
        const router = useRouter();

        const Login = async () => {
            try {
                // const response = await axiosInstance.get(`/login?userid=${userName.value}&passward=${password.value}`);
                const response = await axiosSelfPro.doPost(`/user/login`,{
                    userName: userName.value,
                    password: password.value
                })
                console.log(response)
                const token = response.token;
               

                localStorage.setItem('token', token);
                if(response.allowedRoutes!=null){
                    localStorage.setItem('allowedRoutes',JSON.stringify(response.allowedRoutes));

                }
                

                if (token !== null) {

                    router.push('/Main');

                    localStorage.setItem("myuserid", userName.value);

                    ElMessage({
                        message: '登陆成功！',
                        type: 'success',
                    });
                } else {
                    console.log('登录失败');
                    ElMessage.error('账号或密码错误！');
                }
            } catch (error) {
                console.error(error);
            }
        };

        return { userName, password, Login };
    },
};
</script>